<template>
  <div class="main-Countainer">
    <!-- <headerNavigation3 :jump="1"></headerNavigation3> -->
    <div class="Countainer">
      <div class="leftCountainer">
        <button
          class="show-Photo"
          :class="{ photoshow: classIndex == index }"
          v-for="(item, index) in classselfphoto"
          :key="index"
          @click="(classIndex = index), photosFn()"
        >
          {{ item.name }}
        </button>
      </div>

      <button class="uploadbtn" @click="confirmFn">确定上传</button>
      <div class="photoCountainer" v-if="photShow"> 
        <div class="imagesList">
          <!-- img回显，绑定click事件单机删除-->
          <div
            :key="index"
            v-for="(item, index) in galleryList"
            class="Countainerimg"
          >
            <img :src="`${src1 + item}`" class="img-name" />
            <i class="el-icon-close" @click="deleteImg(index, item) " v-if="classIndex===0"></i>
          </div>
          <el-upload
            v-if="classIndex===0"
            class="img"
            :action="uploadImgUrl"
            list-type="picture-card"
            :on-success="handleUploadSuccess"
            :auto-upload="false"
            :before-upload="handleBeforeUpload"
            accept="image/jpg,image/jpeg,image/png"
            multiple
            :on-error="handleUploadError"
            ref="imageUpload"
            :show-file-list="true"
            :headers="headers"
            :file-list="fileList"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img :src="dialogImageUrl" alt="" />
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { deleteImage, allphotosAPI, classListAPI } from "@/api/make/make";
// import headerNavigation3 from "../components/background/headerNavigation3";
import { getToken } from "@/utils/auth";
import module from "../../allurlimg/img";
import * as imageConversion from "image-conversion";
export default {
  components: {
    // headerNavigation3,
  },
  data() {
    return {
      src1: "",
      classIndex: 0,
      deleteIndex: "",
      galleryList: [],
      DataList: [],
      photShow: true,

      fileList: [],
      uploadList: [],
      photoList: [{ url: "" }],
      dialogImageUrl: "",
      studentId: "",
      dialogVisible: false,
      hideUpload: false,
      uploadImgUrl: "",
      teacherList: [],
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      classselfphoto: [{ name: "个人图库" }, { name: "班级图库" }],
    };
  },
  computed: {
    // 是否显示提示
    showTip() {
      return this.isShowTip && (this.fileType || this.fileSize);
    },
  },
  methods: {
    photosFn() {
      console.log(this.DataList, 'photosFn')
      if (this.classIndex === 0) {
        this.galleryList = this.DataList.userGallery;
      } else if(this.classIndex === 1){
        this.galleryList = this.DataList.gradeGallery;
      }
      this.photShow = false
      this.$nextTick(function() {
      this.photShow = true
      })

    },
    confirmFn() {
      this.$refs.imageUpload.submit();
    },

    //数组对比，单击删除事件
    deleteImg(index, item) {
      this.deleteIndex = index;
      if (this.deleteIndex == index) {
        console.log(item);
        const a = item;
        this.deImage(a);
      }
    },
    //上传图片前
    handleBeforeUpload(file) {
    var img = file.name.substring(file.name.lastIndexOf('.') + 1)
    const suffix = img === 'jpg'||"JPG"
    const suffix2 = img === 'png'||"PNG"
    const suffix3 = img === 'jpeg'||'JPEG'
    const isLt1M = (file.size / 1024 / 1024) * 10 < 6;
    if (!suffix && !suffix2 && !suffix3) {
        this.$message.error("只能上传图片！");
        return false
    }
    else if (!isLt1M) {
       this.$message.warning("上传头像图片大小不能超过 600kb! 将进行压缩");
       let myImg = new Promise((resolve) => {
         // 压缩到500KB,这里的500就是要压缩的大小,可自定义
       imageConversion.compressAccurately(file, 500).then((res) => {
           resolve(res);
         });
       });
       return myImg;
     }
     return isLt1M;
  },
    // 上传成功回调
    handleUploadSuccess(res, file) {
      if (res.code === 200) {
        this.break();
        this.$message({
          message: "恭喜你，上传成功",
          type: "success",
        });
      } else {
        this.$message({
          message: "上传失败,请重新上传",
          type: "error",
        });
      }
    },
    // 上传失败
    handleUploadError() {
      this.$modal.msgError("上传图片失败，请重试");
    },
    //查看班级图库及历史图库
    async classList() {
      const res = await classListAPI();
      console.log("classListAPI", res);
    },
    //回显图片
    async getAllGallery() {
      this.studentId = JSON.parse(localStorage.getItem("person"));
      const res = await allphotosAPI({ studentId: this.studentId });
      console.log("111", res);
      this.DataList = res.data;
      if (this.classIndex == 0) {
        this.galleryList = this.DataList.userGallery;
      } else {
        this.galleryList = this.DataList.gradeGallery;
      }
    },
    //element-ui要改的post请求
    async func1() {
      this.uploadImgUrl =
        process.env.VUE_APP_BASE_API + `/business/gallery/upload`;
      this.getAllGallery();
    },
    // delete接口调用，并回显img
    async deImage(data) {
      const res = await deleteImage(data);
      this.galleryList = [];
      this.getAllGallery();
    },
    break() {
      window.location.reload();
    },
  },
  //开启挂载
  async mounted() {
    this.classList();
    this.src1 = module.host;
    this.getAllGallery();
    this.func1();
    window.onbeforeunload = function (e) {
      var storage = window.localStorage;
      // storage.clear()
    };
  },
};
</script>
<style scoped>
.main-Countainer {
  margin: 0 13.75rem;
}

.photoCountainer {
  overflow:auto;
  height: 52.25rem;
  width: 85.9375rem;
  /* margin-top: 6.25rem; */
  border: 0.0625rem solid rgba(187, 187, 187, 0.47);
  border-radius: 1.25rem;
}

.imagesList {
  display: flex;
  margin-left: 3.125rem;
  margin-top: 3.125rem;
  flex-direction: row;
  flex-wrap: wrap;
}
.el-upload--picture-card {
  border-radius: 0;
}
.images {
  border-radius: 0;
}

.img-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.img-name {
  position: relative;
  display: flex;
  width: 9.0625rem;
  height: 9.0625rem;
  z-index: 1;
}
.Countainerimg {
  position: relative;
  width: 9.0625rem;
  height: 9.0625rem;
  margin: 0.625rem;
}
.el-icon-close {
  top: 0;
  right: 0;
  position: absolute;
  z-index: 2;
  color: rgba(1, 1, 1, 0.6);
  font-size: 1.625rem;
}
.img ::v-deep .el-upload--picture-card {
  position: relative;
  width: 9.0625rem;
  height: 9.0625rem;
  margin: 0.625rem;
}
.img ::v-deep .el-upload-list__item {
  position: relative;
  width: 9.0625rem;
  height: 9.0625rem;
  margin: 0.625rem;
}
.uploadbtn {
  height: 2.5rem;
  width: 12.5rem;
  background-color: #7c0000;
  border: 0.0625rem solid rgba(187, 187, 187, 0.47);
  color: white;
  border-radius: 0.3125rem;
  margin-left: 39.25rem;
}
.photoshow {
  color: #7c0000;
  padding-bottom: 0.3125rem;
  border-bottom: 0.1875rem solid #7c0000 !important;
}
.show-Photo {
  font-size: 1.25rem;
  border: 0rem solid;
  margin: 1.875rem 0rem 0 1.5625rem;
  background: #ffffff;
}
.leftCountainer {
  margin: 1rem;
}
</style>